<template>
  <div id="km">
    <span v-show="isShowHint">暂无数据</span>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      deviceName: [],
      deviceData: [],
      isShowHint: false
    };
  },

  methods: {
    getDeviceOfData(data) {
      if (data.length == 0) {
        this.isShowHint = true;
        return;
      } else {
        this.isShowHint = false;
      }
      this.deviceName = [];
      this.deviceData = [];
      data.forEach(item => {
        this.deviceName.push(item.name);
        this.deviceData.push({
          name: item.name,
          value: item.value
        })
      })
      this.getChartData();
    },

    getChartData() {
      var echarts = require("echarts");
      var div = document.getElementById("km");
      var chart = echarts.init(div);
      chart.setOption({
        color: ['#cd4692', '#9658c3', '#6c6be2', '#01aebf', '#18b794'],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}  ({d}%)",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: 'rgba(150,150,150,0.1)'
            }
          },
          padding: [4, 10],
          backgroundColor: "rgba(255 ,255 ,255 ,1)",
          borderColor: "#eee",
          borderWidth: "1",
          textStyle: {
            color: "#666"
          },
          extraCssText: "box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);"
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: '1%',
          top: '2%',
          itemWidth: 22,
          itemHeight: 14,
          itemGap: 10,
          textStyle: {
            fontSize: 13,
            color: '#5c5c5c'
          },
          data: this.deviceName
        },
        series: [{
          name: '设备退场',
          type: 'pie',
          clockwise: false,
          startAngle: 90,
          radius: ['15%', '75%'],
          center: ['60%', '50%'],
          hoverAnimation: false,
          roseType: 'radius',
          data: this.deviceData,
          itemStyle: {
            show: false,
            normal: {
              borderColor:'#273454',
              borderWidth:'0',
            },
          },
          itemStyle: {
            normal: {
              borderColor: '#ffffff',
              borderWidth: '2',
            },
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{c}}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 100,
                width: 0,
                height: 10,
                padding: [3, 3, 0, -16]
              },
              a: {
                padding: [-35, 15, -20, 5],
              }
            }
          },
          labelLine: {
            normal: {
              length: 8,
              length2: 20,
              lineStyle: {
                width: 1,
              }
            }
          }
        }]
      });
    }
  }
};
</script>

<style  scoped>
#km {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #aaaaaa;
}
</style>
